<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.div1 {
				width: 200px;
				height: 200px;
				background-color: black;
				position: absolute;
			}
			
			.div2 {
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 300px;
				top: 300px;
			}
		</style>
	</head>

	<body>
		<div class="div1"></div>
		<div class="div2"></div>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var div1 = document.querySelector(".div1"),
				div2 = document.querySelector(".div2");

			div1.onmousedown = function(e) {

				var _left = e.clientX - div1.offsetLeft,
					_top = e.clientY - div1.offsetTop;
				document.onmousemove = function(e) {
					div1.style.left = e.clientX - _left + "px";
					div1.style.top = e.clientY - _top + "px";

					/*
					 * 碰撞检测
					 */
//					var div1_left = div1.offsetLeft + div1.offsetWidth,
//						div1_top = div1.offsetTop + div1.offsetHeight,
//						div1_right = div1.offsetLeft,
//						div1_bottom = div1.offsetTop;
//
//					var div2_left = div2.offsetLeft,
//						div2_top = div2.offsetTop,
//						div2_right = div2_left + div2.offsetWidth,
//						div2_bottom = div2_top + div2.offsetHeight;
//					if(div1_top > div2_top && div1_left > div2_left && div2_right > div1_right && div2_bottom > div1_bottom) {
//						div2.style.backgroundColor = "yellow";
//					} else {
//						div2.style.backgroundColor = "pink";
//					}

					if(setBoom(div1,div2)){
						div2.style.backgroundColor = "yellow";
					}else{
						div2.style.backgroundColor = "pink";
					}
				}
				document.onmouseup = function() {
					document.onmousemove = document.onmouseup = null;
				}
			}
			
		</script>
	</body>

</html>